<template>
  <q-page padding>
    <div class="items-center row q-gutter-md" style="margin-bottom: 10px">
      <q-input
        style="width: 20%"
        v-model="queryParams.login_empee_acct"
        :label="$t('EmpeeAcct')"
      />
      <q-select
        style="width: 20%"
        v-model="queryParams.login_success"
        :options="dictOptions.statusYesNo"
        emit-value
        map-options
        :label="$t('Login') + $t('Success')"
      />

      <q-btn color="primary" @click="handleSearch" :label="$t('Search')" />
      <q-btn color="primary" @click="resetSearch" :label="$t('Reset')" />
    </div>

    <q-table
      dense
      row-key="id"
      separator="cell"
      :rows="tableData"
      :columns="columns"
      v-model:pagination="pagination"
      :rows-per-page-options="pageOptions"
      :loading="loading"
      @request="onRequest"
    >
      <template v-slot:top="props">
        <q-space />
        <q-btn
          flat
          round
          dense
          :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
          @click="props.toggleFullscreen"
          class="q-ml-md"
        />
      </template>

      <template v-slot:body-cell-login_success="props">
        <q-td :props="props">
          <q-badge
            align="middle"
            :color="props.row.login_success === 'no' ? 'negative' : 'positive'"
          >
            <DcDictCell
              dictName="statusYesNo"
              :dictCode="props.row.login_success"
            />
          </q-badge>
        </q-td>
      </template>

      <template v-slot:body-cell-created_at="props">
        <q-td :props="props">
          {{ showDateTime(props.row.created_at) }}
        </q-td>
      </template>

      <template v-slot:body-cell-actions="props">
        <q-td :props="props">
          <div class="q-gutter-xs">
            <q-btn color="warning" :label="$t('Detail')">
              <q-tooltip>
                {{ props.row.memo }}
              </q-tooltip>
            </q-btn>
            <q-btn
              color="negative"
              @click="handleDelete(props.row)"
              :label="$t('Delete')"
            />
          </div>
        </q-td>
      </template>
    </q-table>
  </q-page>
</template>

<script setup>
import useTableData from "src/composables/useTableData";
import { computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { FormatDateTime } from "src/utils/date";

const { t } = useI18n();
const url = {
  list: "log/get-log-login-list",
  delete: "log/delete-log-login-by-id",
};
const columns = computed(() => {
  return [
    { name: "id", align: "center", label: "ID", field: "id" },
    {
      name: "login_empee_acct",
      align: "center",
      label: t("EmpeeAcct"),
      field: "login_empee_acct",
    },
    { name: "login_ip", align: "center", label: "IP", field: "login_ip" },
    {
      name: "login_browser",
      align: "center",
      label: t("Browser"),
      field: "login_browser",
    },
    { name: "login_os", align: "center", label: t("Os"), field: "login_os" },
    {
      name: "login_platform",
      align: "center",
      label: t("Platform"),
      field: "login_platform",
    },
    {
      name: "created_at",
      align: "center",
      label: t("CreatedAt"),
      field: "created_at",
    },
    {
      name: "login_success",
      align: "center",
      label: t("Login") + t("Success"),
      field: "login_success",
    },
    { name: "actions", align: "center", label: t("Actions"), field: "actions" },
  ];
});
const {
  dictOptions,
  pagination,
  queryParams,
  pageOptions,
  DcDictCell,
  loading,
  tableData,
  onRequest,
  getTableData,
  handleSearch,
  resetSearch,
  handleDelete,
} = useTableData(url);

onMounted(async () => {
  pagination.value.sortBy = "created_at";
  pagination.value.descending = true;
  getTableData();
});

const showDateTime = computed(() => {
  return (datetime) => {
    return FormatDateTime(datetime);
  };
});
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "LoginLogComp",
});
</script>
